<template>
    <div class="container-header large">
        <Form class="search">
        <Row>
            <Col span="4">
                <div class="mr">
                    <FormItem label="经销商">
                        <Select
                            v-model="list.form.officeId"
                            clearable 
                            filterable
                            @on-change="onChangeOffice"
                        >
                        <Option
                            v-for="item in officeList"
                            :value="item.id"
                            :key="item.id"
                        >{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="月份">
                        <DatePicker type="month" :clearable="false" :options="options" placeholder="请输入月份" v-model="list.form.yearmonth"></DatePicker>
                    </FormItem>
                </div>
            </Col>
            <Col span="4">
                <div class="mr">
                    <FormItem label="">
                        <Select
                            v-model="list.form.depId"
                            clearable 
                            filterable
                            @on-change="onChangeDpt"
                        >
                        <Option
                            v-for="item in dptList"
                            :value="item.id"
                            :key="item.id"
                        >{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="需认证">
                        <Select v-model="list.form.isAuth" clearable @on-change="onSearch">
                            <Option v-for="(item, index) in authList" :key="index" :value="item.id">{{item.name}}</Option>
                        </Select>
                    </FormItem>
                </div>
            </Col>
            <Col span="6">
            <FormItem label="">
                <Select 
                    v-model="list.form.distributorIds"
                    multiple
                    clearable 
                    filterable
                    @on-change="onChangeDistr"
                    :max-tag-count="1"
                    style="width:260px">
                    <Option
                        v-for="item in officeAll"
                        :value="item.distributorId"
                        :key="item.id"
                    >{{item.distributorName}}</Option>
                </Select>
            </FormItem>
            <FormItem label="认证状态">
                <Select
                    v-model="list.form.identifyStatus"
                    clearable
                    @on-change="onChangeStatus"
                >
                <Option
                    v-for="item in identityStatusList"
                    :value="item.id"
                    :key="item.id"
                >{{item.name}}</Option>
                </Select>
            </FormItem>
            </Col>
            <Col span="4">
            <FormItem label="主品牌">
                <Select
                    v-model="list.form.brandId"
                    clearable
                    @on-change="onChangeBrand"
                >
                <Option
                    v-for="item in brandList"
                    :value="item.id"
                    :key="item.id"
                >{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="业务员姓名">
              <Input v-model="list.form.salesmanName" placeholder="请输入业务员姓名"/>
            </FormItem>
            </Col>
            <Col span="4">
            <FormItem label="手机号码">
              <Input v-model="list.form.phoneNo" placeholder="请输入手机号码"/>
            </FormItem>
            </Col>
            <Col class-name="search" span="2">
            <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearch"></Button>
            </Col>
        </Row>
        </Form>
  </div>
</template>
<script>

export default {
  data() {
    return {
        officeList: [],
        dptList: [],
        officeAll: [],
        authList: [{
            name: '所有',
            id: 0
        }, {
            name: '是',
            id: 1
        }, {
            name: '否',
            id: 2
        }],
        brandList: [
            {
                name: '朝阳CHAOYANG',
                id: 2
            },
            {
                name: '好运GOODRIDE',
                id: 3
            },
            {
                name: '威狮WESTLAKE',
                id: 5
            },
            {
                name: '全诺TRAZANO',
                id: 6
            }
        ],
        identityStatusList: [
            {
                name: '认证审核中',
                id: 0
            },
            {
                name: '未认证',
                id: 1
            },
            {
                name: '未验证',
                id: 2
            },
            {
                name: '已验证',
                id: 3
            }
        ],
        options: {
            disabledDate (date) {
                var dateNow = new Date()
                return date && date.valueOf() > dateNow.getTime()
            }
        }
    }
  },
  props: {
        list: Object
  },
  mounted() {
        this.getOfficeList()
        this.getDptList()
        this.getDistList()
  },
  methods: {
    onSearch() {
        this.$emit('onSearch')
    },
    onChangeDistr() {
        this.onSearch()
    },
    onChangeBrand () {
        this.onSearch()
    },
    onChangeStatus () {
        this.onSearch()
    },
    onChangeOffice() {
        this.list.form.distributorIds = []
        if (this.list.form.officeId) {
            this.getListByOfficeId(this.list.form.officeId)
        } else {
            this.getOfficeList()
            this.getDptList()
            this.getDistList()
        }
        this.onSearch()
    },
    onChangeDpt() {
        this.list.form.distributorIds = []
        this.officeAll = []
        if (this.list.form.depId) {
            this.getDistByDptId(this.list.form.depId)
        } else if (this.list.form.officeId && !this.list.form.depId) {
            this.getListByOfficeId(this.list.form.officeId)
        } else {
            this.getOfficeList()
            this.getDptList()
            this.getDistList()
        }
        this.onSearch()
    },
    getListByOfficeId(id) {
        if (!id) return
        this.$ajaxGet(`/tiger/department/list_by_office/${id}`).then(res => {
            this.dptList = []
            this.officeAll = []
            this.dptList = res.departmentList || []
            this.officeAll = res.distributorList || []
        })
    },
    getDistByDptId(id) {
        if (!id) return
        this.$ajaxGet(`/tiger/distributor/list_by_depid/${id}`).then(res => {
            this.officeAll = []
            this.officeAll = res || []
        })
    },
    getOfficeList() {
      this.$ajaxGet('/tiger/department/office_list').then(res => {
          this.officeList = []
          this.officeList = res || []
      })
    },
    getDptList() {
        this.$ajaxGet('/tiger/department/list').then(res => {
            this.dptList = []
            this.dptList = res || []
        })
    },
    getDistList() {
        this.$ajaxGet('/tiger/distributor/list_by_office_all').then(res => {
            this.officeAll = (res || []).map(item => {
                return {
                    id: item.id,
                    distributorId: item.distributorId,
                    distributorName: item.distributorName
                }
            })
        })
    }
  }
}
</script>